<template>
    <div id="app">
        <h2>测试题</h2>
        <SubjectItem :arr="arr" @getResult="getResult"> </SubjectItem>
        <div>
            <FlagItem :flagArr="flagArr"></FlagItem>
        </div>
    </div>
</template>

<script>
import FlagItem from './components/FlagItem.vue';
import SubjectItem from './components/SubjectItem.vue';

export default {
    name: 'App',
    data() {
        return {
            arr: [],
            result: 0,
            flagArr: []
        }
    },
    components: {
        SubjectItem,
        FlagItem
    },
    created() {
        this.getRandom()
    },
    methods: {
        getRandom() {
            // 1.随机生成数据
            // 1.1 生成两个数据,
            for (let index = 0; index < 5; index++) {
                this.left = ~~(Math.random() * 20)
                this.right = ~~(Math.random() * 20)
                const obj = { id: index + 1, left: this.left, right: this.right, result: 0 }
                this.arr.push(obj)
                this.flagArr.push('未完成')
            }
            // console.log('1', JSON.stringify(this.arr))
        },
        getResult(id) {
            // 根据Id得出结果后和传过来的Id比对
            const item = this.arr.find(item => item.id === id);
            const res = item.left + item.right;
            console.log(`题目 ID: ${id}, 用户输入: ${item.result}, 正确答案: ${res}`);
            // this.flagArr[0] = '正确'
            console.log(res, item.result)
            try {
                console.log(JSON.stringify(this.flagArr))
                if (res === item.result) {
                   /*  直接通过索引修改数组元素不会触发视图更新，因为 Vue 无法检测到这种变化。
                    this.$set(target, propertyName/index, value);
                    target：要修改的目标对象或数组。
                    propertyName / index：要添加或修改的属性名或数组索引。
                    value：要设置的新值。 */
                    this.$set(this.flagArr, id - 1, '回答正确');
                } else {
                    this.$set(this.flagArr, id - 1, '回答错误');
                    console.log(this.flagArr)

                }
            } catch (error) {
                console.log('我没有走呀')
            }

        }
    }
};
</script>

<style>
body {
    background-color: #eee;
}

#app {
    background-color: #fff;
    width: 500px;
    margin: 50px auto;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 2em;
}
</style>